<template>
  <el-card>
    <div slot="header">
      <h3>修改销售区域</h3>
    </div>
    <div>
      <el-row type="flex" justify="end">
        <el-button
          type="text"
          size="large"
          icon="el-icon-circle-plus-outline"
          @click="handleBatchSetSaleArea"
          :disabled="isCanBatchSetSaleArea"
          >批量设置销售区域</el-button
        >
        <el-button
          v-show="showBtn('高级关联')"
          type="text"
          size="large"
          icon="el-icon-link"
          @click="handleSeniorAssociated"
        >高级关联</el-button
        >
        <el-button
          type="text"
          size="large"
          @click="handleAssociatedGoods"
          v-show="showBtn('关联商品')"
          >关联商品</el-button
        >
        <el-button
          v-if="canOpeState"
          type="text"
          size="large"
          @click="handleSubmitSaleAreaData"
          :loading="submitLoading"
          :disabled="tableDataList.length == 0"
          >提交</el-button
        >
      </el-row>
      <!-- 发起原因输入框 -->
      <LaunchReasonInput :reason.sync="launchReason" />
      <el-row class="format_table_wrap">
        <general-table
          ref="table"
          :loading="saleAreaTableLoading"
          :data-source="tableDataList"
          :columns="columns"
          :actionRender="actionRender"
          :showActionCol="true"
          :actionColWidth="160"
          @handleSelectRow="handleSelectRow"
        />
      </el-row>
      <FooterFields :footerFields="getRecordInform" />
    </div>
    <spu-associated-dialog
      ref="spuModal"
      idType="productUuid"
      :isSaleAreaPage="true"
      :columns="associatedGoodsTableColumns"
      :requestApi="requestApi"
      :requestParams="requestParams"
      :distinctParams="distinctParams"
      @getRowList="getTableDataByGoodsLinked"
    ></spu-associated-dialog>
    <Modal
      v-model="batchSetModal"
      title="批量设置销售区域"
      @on-ok="modalSure"
      @on-cancel="modalCancel"
    >
      <Checkbox :value="modal.checkAll" @click.prevent.native="handleCheckAll"
        >全选
      </Checkbox>
      <CheckboxGroup
        v-model="modal.checkAllGroup"
        @on-change="checkAllGroupChange"
      >
        <Checkbox
          v-for="item in batchCheckData"
          :label="item.areaName"
          :key="item.areaId"
        ></Checkbox>
      </CheckboxGroup>
    </Modal>
    <Modal
      v-model="singleSetModal"
      title="选择销售区域"
      @on-ok="tableModalSure"
      @on-cancel="tableModalCancel"
    >
      <Row type="flex" style="justify-content: space-between">
        <div>
          <Row type="flex">
            <Checkbox
              v-model="tableModal.tableCheckAll"
              @click.prevent.native="handleTableCheckAll"
              >全选
            </Checkbox>
            <div style="margin-left: 50px; margin-right: 25px">原值</div>
            <div>现值</div>
          </Row>
          <Row>
            <CheckboxGroup
              v-model="tableModal.tableCheckAllGroup"
              @on-change="checkGroupChange"
            >
              <div
                style="display: flex"
                v-for="(item, index) in tableCheckData"
                :key="index"
              >
                <Checkbox :label="item.areaName" :key="item.areaId"></Checkbox>
                <div style="margin-left: 25px; margin-right: 40px">
                  {{ item.originValue }}
                </div>
                <div>{{ item.currentValue }}</div>
              </div>
            </CheckboxGroup>
          </Row>
        </div>
        <div></div>
      </Row>
    </Modal>
    <!-- 高级关联弹框 -->
    <SeniorLinkedDialog
      :visible.sync="seniorAssociated.visible"
      :columns="seniorAssociated.columns"
      :dataSource="seniorAssociated.dataSource"
      @seniorSearchResult="getResultBySeniorSearch"
    />
  </el-card>
</template>
<script>
import { mapGetters } from 'vuex';
import { ApiRequest } from '@api/basePage';
import { getBtnsId } from '@/libs/btnsPermission';
import FooterFields from '@/pages/commodity/components/FooterFields';
import generalTable from '@/pages/commodity/modules/components/generalTable';
import spuAssociatedDialog from '@/components/common/dialog/associatedGoods/spuAssociatedDialog';
import SeniorLinkedDialog from '@/components/SeniorLinkedDialog';
import LaunchReasonInput from '@/components/LaunchReasonInput';
import spuDimensionMixins from '@/components/common/dialog/associatedGoods/mixins/spuDimension';
import { EDIT_SELL_AREA_AMOUNT } from '@/constants/exportAmountLimit';
import { isResponseSuccess } from '@/utils/bizUtils';
import {
  getCanceledSaleAreaStockInfoService
} from '@/api/commodity/commodityManage/modifySalesArea';
import { getCanOpeState } from '@/utils/getUtils';
export default {
  mixins: [spuDimensionMixins],
  components: {
    FooterFields,
    generalTable,
    spuAssociatedDialog,
    SeniorLinkedDialog,
    LaunchReasonInput
  },
  data () {
    return {
      canOpeState: true, // 页面可操作状态
      launchReason: '', // 发起原因
      seniorAssociated: {
        visible: false,
        columns: [{
          label: 'SPU编码',
          prop: 'spuNo',
          type: 'textarea'
        }],
        dataSource: [{ spuNo: '' }],
        isSenior: false
      },
      saleAreaTableLoading: false,
      submitLoading: false,
      isCanBatchSetSaleArea: true,
      singleSetModal: false,
      batchSetModal: false,
      requestApi: {
        url: ['/sysback/modifySaleArea/getRelatedSpuList'], // 关联商品查询接口
        type: 'post'
      },
      requestParams: [
        {
          category: 'categoryUuid',
          productName: 'productName',
          spuNo: 'spuNo'
        }
      ], // 关联商品查询接口所需入参
      distinctParams: {
        notAssociated: 'productUuidNotInList',
        isAssociated: 'productUuidInList'
      }, // 关联商品查询接口区别未关联和已关联的入参
      associatedGoodsTableColumns: [
        {
          type: 'selection',
          width: 60,
          fixed: 'left',
          align: 'center'
        },
        {
          title: '商品分类',
          minWidth: 120,
          key: 'categoryPath',
          align: 'center'
        },
        {
          title: '商品名称',
          minWidth: 120,
          key: 'productName',
          align: 'center'
        },
        {
          title: 'SPU编码',
          minWidth: 120,
          key: 'spuNo',
          align: 'center'
        },
        {
          title: '品牌',
          minWidth: 120,
          key: 'brandName',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          fixed: 'right',
          minWidth: 180
        }
      ],
      columns: [
        {
          type: 'selection',
          width: 60,
          fixed: 'left',
          align: 'center'
        },
        {
          title: 'spu编码',
          width: 120,
          key: 'spuNo',
          align: 'center'
        },
        {
          title: '商品名称',
          width: 200,
          key: 'productName',
          align: 'center'
        },
        {
          title: '品牌',
          width: 120,
          key: 'brandName',
          align: 'center'
        },
        {
          title: '商品管理区域',
          width: 120,
          key: 'manageAreaName',
          align: 'center'
        },
        {
          title: '销售区域',
          align: 'center',
          children: [
            {
              title: '原值',
              align: 'center',
              key: 'originalSaleAreaShortNames',
              width: 200,
            },
            {
              title: '现值',
              align: 'center',
              key: 'presentSaleAreaShortNames',
              width: 200,
            }
          ]
        },
        {
          title: '取消销售区域库存信息',
          align: 'center',
          children: [
            {
              title: '库存',
              align: 'center',
              key: 'allRealStockNum',
              width: 200,
            },
            {
              title: '采购在途',
              align: 'center',
              key: 'allPurchaseStockNum',
              width: 200,
            },
            {
              title: '销售占用',
              align: 'center',
              key: 'allRealStockOccupy',
              width: 200,
            },
            {
              title: '转货在途',
              align: 'center',
              key: 'allTransshipStockNum',
              width: 200,
            }
          ]
        }
      ],
      tableDataList: [],
      tableSelectAry: [], // 表格中的勾选数据
      modal: {
        indeterminate: true,
        checkAll: false,
        checkAllGroup: [],
        checkGroupValue: []
      },
      tableModal: {
        tableCheckAll: false,
        tableCheckAllGroup: [],
        productUuid: '' // 记录表格中的每一个productUuid
      },
      requestApiUrl: {
        /* 查询销售区域信息 */
        getSaleAreaList: {
          url: '/sysback/modifySaleArea/getSaleAreaList',
          type: 'post'
        },
        /* 修改销售区域页面--商品销售区域等信息查询 */
        getSpuSaleAreaList: {
          url: '/sysback/modifySaleArea/getSpuSaleAreaList',
          type: 'post'
        },
        /* 修改销售区域提交 */
        tableCommit: {
          url: '/sysback/modifySaleArea/commit',
          type: 'post'
        },
        /* 查询提交的单据信息 */
        getRecord: {
          url: '/sysback/modifySaleArea/getRecord',
          type: 'post'
        },
        getExistDataByUuid: { // 表单修改页-修改按钮进入-查询已有数据 by uuid
          url: '/sysback/modifySaleArea/getRecord',
          type: 'post'
        }
      },
      batchCheckData: [], // 批量设置销售区域接口的返回总数据
      tableCheckData: [], // 表格的设置销售区域
      singleOriginalSaleAreaNos: [], // 单个设置销售区域id值
      batchOriginalSaleAreaNos: [], // 批量设置销售区域id值
      currentValueAry: [], // 现值集合
      currentNosAry: [], // 现值code集合
      getRecordInform: {}, // 审批信息
    };
  },
  mounted () {
    this.setCanOpeState()
    this.loadInitDataInMounted();
  },
  methods: {
    // 设置页面是否可操作状态值
    async setCanOpeState () {
      this.canOpeState = await getCanOpeState(this.$route.name)
    },
    // 渲染操作栏按钮
    actionRender (h, { index, row }) {
      return (<div class="table-action">
        {<el-button
          size="mini"
          type="text"
          onClick={() => this.handleStockInfo({ row })}
        >库存详情</el-button>}
        {<el-button
          size="mini"
          type="text"
          onClick={() => this.handleCancelSelect({ row })}
        >删除</el-button>}
        {<el-button
          size="mini"
          type="text"
          onClick={() => this.handleSetSaleArea({ row, index })}
        >设置销售区域</el-button>}
      </div>);
    },
    // 在mounted时期加载初始数据
    loadInitDataInMounted () {
      const { uuid } = this.$route.query;
      if (uuid) {
        this.getExistTableDataByUuid(uuid);
      }
      this.getBatchSalesAreaAction() // 初始获取批量设置销售区域的区域集合
    },
    // 获取已有表格数据 by uuid
    getExistTableDataByUuid (uuid) {
      this.postRequestTableData({
        ...this.requestApiUrl.getExistDataByUuid,
        data: { recordUuid: uuid }
      }).then(retData => {
        if (!retData) { return false; }
        const { detailVoList, launchReason } = retData;
        this.tableDataList = [].concat(detailVoList);
        this.launchReason = launchReason;
        this.getRecordInform = retData;
      });
    },
    // 获取表格数据 by 公用方法
    getTableDataByCommon (data) {
      if (!data.spuNos || data.spuNos.length === 0) {
        return;
      }
      this.postRequestTableData({
        ...this.requestApiUrl.getSpuSaleAreaList,
        data
      }).then(retData => {
        if (!retData) { return false; }
        this.tableDataList = retData.reduce((value, item) => {
          item.presentSaleAreaShortNames = item.originalSaleAreaShortNames;
          item.presentSaleAreaNos = item.originalSaleAreaNos;
          value.push(item);
          return value;
        }, []);
      })
    },
    // 表格数据post请求
    async postRequestTableData ({ url, type, data, isFormData = false }) {
      try {
        this.saleAreaTableLoading = true;
        const res = await ApiRequest(url, type, data, isFormData);
        this.saleAreaTableLoading = false;
        if (isResponseSuccess(res)) {
          return res.retData;
        }
        this.tableDataList = [];
      } catch (err) {
        this.tableDataList = [];
        this.saleAreaTableLoading = false;
      }
    },
    /* 库存详情 */
    handleStockInfo (data) {
      const { row } = data;
      let routeData = this.$router.resolve({
        path: '/commodity/commodityManage/stopOrEnableManage/stopOrEnableManageAudit?spuNo=' + row.spuNo,
      });
      window.open(routeData.href, '_blank');
    },
    /* 取消对应表格row */
    handleCancelSelect (data) {
      const { row } = data;
      if (this.seniorAssociated.isSenior) {
        this.deleteRowBySeniorLinked(row);
        return false;
      }
      this.handleDeleteSpuRow(row, this.tableDataList, 'productUuid');
      this.getTableDataByGoodsLinked();
    },
    /* 高级关联事件 */
    handleSeniorAssociated () {
      const curBtnId = getBtnsId('高级关联');
      sessionStorage.setItem('buttonId', curBtnId);
      this.seniorAssociated.visible = true;
    },
    /* 获取高级关联结果方法 */
    getResultBySeniorSearch (data) {
      this.seniorAssociated.isSenior = true;
      this.CLEAR_GOODS();
      const params = {
        spuNos: data
      }
      this.getTableDataByCommon(params);
    },
    /* 高级关联删除表格row的方法 */
    deleteRowBySeniorLinked (row) {
      const rowIndex = this.tableDataList.findIndex(item => {
        return item.spuNo === row.spuNo;
      });
      if (rowIndex === -1) { return false; }
      this.tableDataList.splice(rowIndex, 1);
    },
    /* 关联商品 */
    handleAssociatedGoods () {
      let curBtnId = getBtnsId('关联商品');
      sessionStorage.setItem('buttonId', curBtnId);
      this.CHANGE_MODAL_SWITCH(true);
      /* this.$nextTick(() => {
        this.$refs.spuModal.getDataListAction();
      }); */
    },
    // 获取表格数据 by 关联商品
    getTableDataByGoodsLinked () {
      const dataList = this.getListFromMapFn().map((value) => {
        return value.spuNo;
      });
      this.seniorAssociated.isSenior = false;
      const params = {
        spuNos: dataList
      };
      this.getTableDataByCommon(params);
    },
    handleSelectRow (data) {
      this.tableSelectAry = data;
      this.isCanBatchSetSaleArea = (this.tableSelectAry.length <= 0) || false;
    },
    /* 提交操作 */
    handleSubmitSaleAreaData () {
      if (this.tableDataList.length > EDIT_SELL_AREA_AMOUNT) {
        return this.$message.warning(`当前单据提交的行数不能超过${EDIT_SELL_AREA_AMOUNT}`)
      }
      this.$Modal.confirm({
        title: '提示',
        content: '确认提交信息吗？',
        onOk: () => {
          this.submitDataAction();
        }
      });
    },
    submitDataAction () {
      let spuSaleAreaListVoListAry = this.tableDataList.reduce((value, item) => {
        value.push({
          productUuid: item.productUuid,
          spuNo: item.spuNo,
          productName: item.productName,
          brandName: item.brandName,
          categoryUuid: item.categoryUuid,
          categoryPath: item.categoryPath,
          manageAreaUuid: item.manageAreaUuid,
          manageAreaName: item.manageAreaName,
          originalSaleAreaNos: item.originalSaleAreaNos,
          originalSaleAreaShortNames: item.originalSaleAreaShortNames,
          presentSaleAreaNos: item.presentSaleAreaNos,
          presentSaleAreaShortNames: item.presentSaleAreaShortNames,
          allRealStockNum: item.allRealStockNum,
          allPurchaseStockNum: item.allPurchaseStockNum,
          allRealStockOccupy: item.allRealStockOccupy,
          allTransshipStockNum: item.allTransshipStockNum
        })
        return value
      }, []);
      let tableParams = {
        spuSaleAreaListVoList: spuSaleAreaListVoListAry,
        launchReason: this.launchReason // 发起原因
      };
      this.submitLoading = true;
      ApiRequest(
        this.requestApiUrl.tableCommit.url,
        this.requestApiUrl.tableCommit.type,
        tableParams
      ).then(res => {
        this.submitLoading = false;
        if (res.retStatus !== '1') { return }
        this.$Message.success('提交成功');
        let recordUuid = res.retData.recordUuid;
        this.getRecordInfo(recordUuid);
        this.$router.push({ name: 'chageFromManageList' });
      }).catch(() => {
        this.submitLoading = false;
      })
    },
    /* 查询提交的单据信息 */
    getRecordInfo (recordUuid) {
      let params = {
        recordUuid: recordUuid
      };
      ApiRequest(
        this.requestApiUrl.getRecord.url,
        this.requestApiUrl.getRecord.type,
        params
      ).then((data) => {
        if (data.retStatus == 1) {
          this.getRecordInform = data.retData;
          sessionStorage.removeItem('productUuid');
        }
      });
    },
    setGroupListBySaleArea (row) {
      const { originalSaleAreaNos, presentSaleAreaNos } = row; // 销售区域集合原值和现值; originalSaleAreaNos-原值；presentSaleAreaNos-现值
      if (!originalSaleAreaNos || originalSaleAreaNos.length === 0) { return false; }
      if (originalSaleAreaNos.length === this.tableCheckData.length) { // 全部勾选
        this.tableModal.tableCheckAll = true;
      } else {
        this.tableModal.tableCheckAll = false;
      }
      this.tableCheckData.forEach(item => {
        item.originValue = originalSaleAreaNos.includes(item.areaCode) ? '是' : '否'; // 销售区域弹框原值
        item.currentValue = presentSaleAreaNos.includes(item.areaCode) ? '是' : '否'; // 销售区域弹框现值
      });
    },
    // 表格- 设置销售区域
    handleSetSaleArea (data) {
      const { row } = data;
      // salesAreaNosAry - 当前现值集合
      const salesAreaNosAry = this.tableCheckData
        .filter(item => row.presentSaleAreaNos.includes(item.areaCode))
        .map(item => item.areaName);
      this.setGroupListBySaleArea(row);
      this.tableModal.productUuid = row.productUuid;
      this.tableModal.tableCheckAllGroup = salesAreaNosAry;
      this.checkGroupChange(salesAreaNosAry);
      this.singleSetModal = true;
    },
    // 批量设置销售区域
    handleBatchSetSaleArea () {
      this.modal.checkAll = false;
      if (this.tableSelectAry.length <= 0) {
        return this.$Message.warning('请勾选你要设置销售区域');
      }
      let originalSaleAreaNosAry = [];
      let originValue = [];
      this.tableSelectAry.forEach((item) => {
        item.originalSaleAreaNos.forEach((item2) => {
          originalSaleAreaNosAry.push(item2);
        });
      });
      this.batchCheckData.forEach((item) => {
        if (originalSaleAreaNosAry.indexOf(item.areaCode) > -1) {
          originValue.push(item.areaName);
        }
      });
      this.modal.checkAllGroup = originValue;
      this.checkAllGroupChange(originValue);
      if (this.modal.checkAllGroup.length === this.tableCheckData.length) {
        this.modal.checkAll = true
      }
      this.batchSetModal = true;
    },
    getBatchSalesAreaAction () {
      ApiRequest(
        this.requestApiUrl.getSaleAreaList.url,
        this.requestApiUrl.getSaleAreaList.type
      ).then((data) => {
        if (data.retStatus == 1) {
          this.batchCheckData = data.retData ? data.retData : [];
          data.retData.forEach((item) => {
            item.originValue = '否';
            item.currentValue = '否';
          });
          this.tableCheckData = data.retData ? data.retData : [];
        }
      });
    },
    /* 批量设置销售区域弹窗 start */
    // 弹窗-确认按钮
    modalSure () {
      let shortCode = [];
      let shortName = [];
      // 全选操作
      if (this.modal.checkAll) {
        this.batchCheckData.forEach((item) => {
          if (this.modal.checkAllGroup.indexOf(item.areaName) > -1) {
            shortCode.push(item.areaCode);
            shortName.push(item.shortName);
          }
        });
      } else {
        this.batchCheckData.forEach((item) => {
          if (this.modal.checkGroupValue.indexOf(item.areaName) > -1) {
            shortCode.push(item.areaCode);
            shortName.push(item.shortName);
          }
        });
      }
      // 勾选的data this.tableSelectAry
      this.tableDataList.forEach((item) => {
        this.tableSelectAry.forEach((item2) => {
          if (item.productUuid == item2.productUuid) {
            item.presentSaleAreaShortNames = [...new Set(shortName)].join('');
            item.presentSaleAreaNos = [...new Set(shortCode)];
          }
        });
      });
      this.handleCanceledSaleAreaStockInfo(this.tableSelectAry);
      this.tableSelectAry = [];
      this.$refs.table.handleClearSelections();
      this.modal.checkAll = false;
    },
    // 获取取消的销售区域信息
    async handleCanceledSaleAreaStockInfo (selTableDataList) {
      if (selTableDataList.length === 0) {
        return;
      }
      let reqDataList = [];
      selTableDataList.forEach(item => {
        let delSaleAreaCodes =
          item.originalSaleAreaNos.filter((val) => { return item.presentSaleAreaNos.indexOf(val) === -1 });
        if (delSaleAreaCodes.length === 0) {
          return;
        }
        let reqData = {
          spuNo: item.spuNo,
          delSaleAreaCodes: delSaleAreaCodes
        };
        reqDataList.push(reqData);
      });
      if (reqDataList.length === 0) {
        return;
      }
      const loadingFn = state => { this.saleAreaTableLoading = state };
      const stockInfoList = await getCanceledSaleAreaStockInfoService(reqDataList, loadingFn);
      if (stockInfoList) {
        this.tableDataList.forEach((item) => {
          stockInfoList.forEach((stockInfo) => {
            if (item.spuNo === stockInfo.spuNo) {
              item.allRealStockNum = stockInfo.allRealStockNum;
              item.allPurchaseStockNum = stockInfo.allPurchaseStockNum;
              item.allRealStockOccupy = stockInfo.allRealStockOccupy;
              item.allTransshipStockNum = stockInfo.allTransshipStockNum;
            }
          });
        });
      }
    },
    // 弹窗-取消按钮
    modalCancel () {},
    // 弹窗全选操作
    handleCheckAll () {
      this.modal.checkAll = !this.modal.checkAll;
      if (this.modal.checkAll) {
        let checkAry = [];
        this.batchCheckData.forEach((item) => {
          checkAry.push(item.areaName);
        });
        this.modal.checkAllGroup = checkAry;
      } else {
        this.modal.checkAllGroup = [];
      }
    },
    checkAllGroupChange (data) {
      if (data.length == this.batchCheckData.length) {
        this.modal.checkAll = true;
      } else {
        this.modal.checkAll = false;
      }
      this.modal.checkGroupValue = data;
    },
    /* 批量设置销售区域弹窗 end */

    /* 设置销售区域 start */
    tableModalCancel () {},
    /* 设置销售区域弹窗全选操作 */
    handleTableCheckAll () {
      this.tableModal.tableCheckAll = !this.tableModal.tableCheckAll;
      this.currentValueAry = [];
      if (this.tableModal.tableCheckAll) {
        let ary = [];
        this.tableCheckData.forEach((item) => {
          ary.push(item.areaName);
        });
        this.tableModal.tableCheckAllGroup = ary;
        this.tableCheckData.forEach((item) => {
          item.currentValue = '是';
          this.currentValueAry.push(item.shortName);
          this.currentNosAry.push(item.areaCode);
        });
      } else {
        this.tableModal.tableCheckAllGroup = [];
        this.tableCheckData.forEach((item) => {
          item.currentValue = '否';
        });
        this.currentValueAry = [];
        this.currentNosAry = [];
      }
    },
    // 设置销售区域check框操作
    checkGroupChange (data) {
      this.currentValueAry = [];
      this.currentNosAry = [];
      if (data.length == this.tableCheckData.length) {
        this.tableModal.tableCheckAll = true;
      } else {
        this.tableModal.tableCheckAll = false;
      }
      this.tableCheckData.forEach((item) => {
        if (data.indexOf(item.areaName) > -1) {
          item.currentValue = '是'; // shortName
          this.currentValueAry.push(item.shortName);
        } else {
          item.currentValue = '否';
        }
        if (data.indexOf(item.areaName) > -1) {
          this.currentNosAry.push(item.areaCode);
        }
      });
    },
    // 设置销售区域确认操作 this.tableModal.productUuid
    tableModalSure () {
      let selTableDataList = [];
      this.tableDataList.forEach((item) => {
        if (item.productUuid == this.tableModal.productUuid) {
          let newCurrentValue = [...new Set(this.currentValueAry)];
          item.presentSaleAreaShortNames = newCurrentValue.join('');
          item.presentSaleAreaNos = [...new Set(this.currentNosAry)];
          selTableDataList.push(item);
        }
      });
      this.handleCanceledSaleAreaStockInfo(selTableDataList);
    }
    /* 设置销售区域 end */
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn'])
  }
};
</script>
